<template>
<div>
    <!--头部操作行开始-->
    <div class="form-top">
        <div class="form-top-left">
            <span>标题：</span>
            <el-input v-model="inputPicName" placeholder="请输入内容"></el-input>
            <span>来源：</span>
            <el-input v-model="inputSource" placeholder="请输入内容"></el-input>
            <span>状态：</span>
            <el-select v-model="valueDown">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-row>
                <el-button type="primary" @click="Getlist" v-if="_SHOWBTN('wzgl-cflt-tszs-wzzjbsy-ss')">查询</el-button>
                <el-button @click="GetBack">重置</el-button>
            </el-row>
        </div>
        <!--右侧全局操作按钮-->
        <div class="form-top-right">
            <el-button-group>
                <!--wzgl-cflt-tszs-wzzjbsy-tg-->
                <el-button type="xingjian" icon="el-icon-plus" @click="GoTextEditor" v-if="_SHOWBTN('wzgl-cflt-tszs-wzzjbsy-tg')">投稿</el-button>
                <DeleteAll title="是否要删除所选内容?" :multipleSelection="multipleSelection" :getBannerList="getForumArmedList" type="4" showBetCode="wzgl-cflt-tszs-wzzjbsy-plsc"></DeleteAll>
            </el-button-group>
        </div>
    </div>
    <!--头部操作行结束-->
    <!--中间表格区域开始-->
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" :border="true">
        <el-table-column type="selection" label="序号" width="52" prop="number" align="center"></el-table-column>
        <el-table-column prop="title" label="标题" min-width="100"></el-table-column>
        <el-table-column prop="publishStatus" label="状态" show-overflow-tooltip width="171" align="center">
            <template slot-scope="scope">
                <span v-if="scope.row.publishStatus===1">待审核</span>
                <span v-else-if="scope.row.publishStatus===2">待发布</span>
                <span v-else-if="scope.row.publishStatus===3">被退回</span>
                <span v-else-if="scope.row.publishStatus===4">已发布</span>
            </template>
        </el-table-column>
        <el-table-column prop="source" label="来源" show-overflow-tooltip width="171" align="center"></el-table-column>
        <el-table-column prop="publishTime" label="发布日期" show-overflow-tooltip width="238" align="center"></el-table-column>
        <el-table-column prop="opTime" label="投稿日期" show-overflow-tooltip width="238" align="center"></el-table-column>
        <el-table-column prop="operation" label="操作" show-overflow-tooltip width="225" align="center">
            <template slot-scope="scope">
                <el-button-group>
                    <div class="button-look-box">
                        <Tc-result :state="scope.row.publishStatus" :row="scope.row" :gettRotationList="getForumArmedList" title="武装自己查看" showBetCode="wzgl-cflt-tszs-wzzjbsy-ck"></Tc-result>
                        <!--wzgl-cflt-tszs-wzzjbsy-ck-->
                    </div>
                    <!--anniu 区域-->
                    <!--审核按钮-->
                    <Bt-Shenhe v-if="scope.row.publishStatus===1" :state="scope.row.publishStatus" :row="scope.row" :gettRotationList="getForumArmedList" showBetCode="wzgl-cflt-tszs-wzzjbsy"></Bt-Shenhe>
                    <!--wzgl-cflt-tszs-wzzjbsy-->
                    <!--发布按钮-->
                    <Bt-send :gettRotationList="getForumArmedList" v-else-if="scope.row.publishStatus===2" :id="scope.row.id" showBetCode="wzgl-cflt-tszs-wzzjbsy-fb"></Bt-send>
                    <!--wzgl-cflt-tszs-wzzjbsy-fb-->
                    <Single-deletion :clearOne="clearOne" :id="scope.row.id" showBetCode="wzgl-cflt-tszs-wzzjbsy-plsc"></Single-deletion>
                    <!--wzgl-cflt-tszs-wzzjbsy-plsc-->
                </el-button-group>
            </template>
        </el-table-column>
    </el-table>
    <div style="margin-top: 20px"></div>
    <!--中间表格区域结束-->
    <!-- 分页开始 -->
    <div class="fenye-bottom">
        <Pagination :total="total" :params="paramsArmed" :get="getForumArmedList"></Pagination>
    </div>

    <!-- 分页结束 -->
</div>
</template>

<script>
import Pagination from "@/components/Popup/Pagination.vue";
import TcResult from "./TCResult";
import BtShenhe from "./BtShenHe";
import BtSend from "./BtSend";
import DeleteAll from "@/components/Popup/DeleteAll.vue";
import SingleDeletion from "@/components/Popup/SingleDeletion.vue";
export default {
    components: {
        Pagination,
        TcResult,
        BtShenhe,
        BtSend,
        DeleteAll,
        SingleDeletion,
    },
    data() {
        return {
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                name: "",
                region: "",
                date1: "",
                date2: "",
                delivery: false,
                type: [],
                resource: "",
                desc: "",
            },
            formLabelWidth: "120px",
            options: [{
                    value: "",
                    label: "全部",
                },
                {
                    value: 1,
                    label: "待审批",
                },
                {
                    value: 2,
                    label: "待发布",
                },
                {
                    value: 3,
                    label: "被退回",
                },
                {
                    value: 4,
                    label: "已发布",
                },
            ],
            value: "",
            //表格数据
            tableData: [],
            multipleSelection: [],
            //---------
            paramsArmed: {
                pageNum: this.$store.state.PortalManagement.pageNum,
                pageSize: this.$store.state.PortalManagement.pageSize,
                publishStatus: "",
                source: "",
                title: "",
            },
            total: 0,
            inputPicName: "",
            inputSource: "",
            valueDown: "",
        };
    },
    created() {
        this.getForumArmedList();
    },
    methods: {
        //单行删除
        clearOne(id) {
            let ID = {
                ids: [{
                    id: id,
                }, ],
                type: "1",
            };
            // console.log(ID,12121)
            this.Api.getArmedClear(ID).then((res) => {
                this.getForumArmedList();
            });
        },
        //打回编辑
        GoBack(row) {
            this.$router.push({
                name: "GobackArmed",
                params: {
                    row: row,
                    title: "编辑武装自己"
                },
            });
        },
        //新建跳转创建
        //新建页面还没创建，明天继续
        GoTextEditor() {
            // console.log(1111)
            this.$router.push({
                name: "BuildNewForum",
                params: {
                    title: "新建武装自己",
                    isBuild: 3,
                    name: "武装自己查看"
                },
            });
        },
        GoBackBianJi(id) {
            this.$router.push({
                name: "BianJiClass",
                params: {
                    id: id
                }
            });
        },
        //重置按钮
        GetBack() {
            this.inputPicName = "";
            this.valueDown = "";
            this.inputSource = "";
            this.paramsArmed = {};
            this.paramsArmed = {
                pageNum: 1,
                pageSize: 10,
                publishStatus: "",
                source: "",
                title: "",
            };
            this.getForumArmedList();
        },
        //查询按钮
        Getlist() {
            this.paramsArmed = {};
            this.paramsArmed = {
                pageNum: 1,
                pageSize: 20,
                title: this.inputPicName,
                publishStatus: this.valueDown,
                source: this.inputSource,
            };
            // console.log(this.value1,1212)
            // console.log(this.value2,121212)
            this.getForumArmedList();
        },
        //列表接口
        getForumArmedList() {
            // console.log(1111)
            this.Api.getArmedList(this.paramsArmed).then((res) => {
                // console.log(res,111)
                this.tableData.length = 0;
                this.tableData = res.data.records;
                this.total = res.data.total;
            });
        },

        open() {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                    center: true,
                })
                .then(() => {
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        //表格方法
        toggleSelection(rows) {
            if (rows) {
                rows.forEach((row) => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
    },
};
</script>

<style lang="less" scoped>
.form-top {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;

    .form-top-left {
        display: flex;
        justify-content: start;
        align-items: center;
        margin-bottom: 21px;

        /deep/.el-input__inner {
            width: 154px;
            height: 36px;
            background: rgba(255, 255, 255, 1);
            border-radius: 3px;
            border: 1px solid rgba(230, 230, 230, 1);
        }
    }
}

/deep/.el-select {
    margin-right: 10px;
}

/deep/.el-button--primary {
    width: 52px;
    height: 36px;
    background: rgba(61, 127, 255, 1);
    border-radius: 3px;
    padding: 0;
}

/deep/.el-button--default {
    width: 52px;
    height: 36px;
    background: rgba(240, 242, 245, 1);
    border-radius: 3px;
    border: 1px solid rgba(215, 219, 224, 1);
    padding: 0;
}

/deep/.el-button--xingjian {
    width: 80px;
    height: 36px;
    background: rgba(61, 127, 255, 1);
    border-radius: 3px;
    padding: 0;
    color: white;
    margin-right: 10px !important;
}

/deep/.el-button--shanchu {
    width: 80px;
    height: 36px;
    background: rgba(255, 255, 255, 1);
    border-radius: 3px;
    border: 1px solid rgba(251, 54, 63, 1);
    padding: 0;
    color: #fb363f;
}

/deep/.el-table__header {
    background-color: #e8e8e8 !important;
}

/deep/.el-table_1_column_1 {
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
}

/deep/.el-table {
    td {
        padding: 8px 0;
    }

    th {
        padding: 8px 0;
    }
}

/deep/.el-button--chakan {
    width: 60px;
    height: 28px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    color: #333333;
    padding: 0;
    margin-right: 20px !important;
}

/deep/.el-button--shenghe {
    width: 60px;
    height: 28px;
    background: #f5a623;
    border-radius: 4px;
    color: white;
    padding: 0;
}

/**改动 */
/deep/.el-input {
    width: 154px;
    margin-right: 20px;
}

/deep/.el-date-editor {
    position: relative;
}

/deep/.el-input__icon,
.el-icon-date {
    line-height: 35px;
    position: absolute;
    left: 120px;
}

.time-zhi {
    margin-right: 13px;
}

/deep/.el-table_2_column_11 {
    .cell {
        padding-left: 35px;
    }
}

/deep/.has-gutter {
    /deep/tr {
        height: 46px;
    }
}

/deep/tbody {
    tr td:nth-child(2) {
        /deep/.cell {
            padding-left: 35px !important;
        }
    }
}

/deep/.has-gutter {
    tr th:nth-child(2) {
        .cell {
            padding-left: 35px !important;
        }
    }
}

.fenye-bottom {
    display: flex;
    justify-content: flex-end;
}

tr td:last-child {
    .el-tooltip {
        .el-button-group {
            display: flex;
            align-items: center;

            .button-look-box {
                width: 100px;
                display: flex;
                justify-content: flex-end;
            }
        }
    }
}

.button-look-back {
    width: 60px;
    height: 28px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    color: #333333;
    padding: 0;
    margin-right: 20px;
}

.button-look-bianji {
    width: 60px;
    height: 28px;
    background: rgba(61, 127, 255, 1);
    border-radius: 4px;
    padding: 0;
    color: #ffffff;
}

/deep/.el-icon-arrow-up {
    left: -25px;
}

//标题栏按钮样式flex
/deep/.form-top-right {
    >.el-button-group {
        display: flex;
    }
}

.el-button-group {
    display: flex;
    justify-content: center;
}
</style>
